<template>


	<rui-pages>
		<view class="fold">
			<view class="fold_item" v-for="(item, index) in list" :key="index" @click="onFold(item)">
				<view class="fold_item_top">
					<view class="fold_item_top_left">
						<image :src="item.image" class="fold_item_top_left_image"
							mode=""></image>
						<view class="fold_item_top_left_name">
							{{item.name}}
						</view>
					</view>

					<view class="fold_item_top_icon" :class="item.status ? 'rotate_icon':''">
						<rui-icons icon="right" color="#999"></rui-icons>
					</view>
				</view>
				<view class="fold_item_main" v-if="item.status">
					<view class="fold_item_main_item" v-for="(child, i) in item.help" :key="i"
						@click.stop="onChild(child)">
						{{child.name}}
					</view>
				</view>
			</view>
		</view>
	</rui-pages>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		getHelpList
	} from "@/common/api.js"


	const onFold = (item) => {
		item.status = !item.status
	}

	const onChild = (item) => {
		uni.$rui.route('/pages/user/detail/detail', {
			id: item.id
		})
	}

	let list = ref([]),
		loading = ref(true),
		status = ref('more'),
		params = reactive({
			page: 1,
			limit: 15
		}),
		contentText = ref({
			contentdown: '点击加载更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多了'
		});

	onLoad(opts => {
		if (opts.product_id) {
			params.product_id = opts.product_id;
		}
		getData()
	})

	const getData = () => {
		getHelpList(params).then(res => {
			list.value = list.value.concat(res.data);
			if (res.data.length < params.limit) {
				status.value = 'no-more';
			} else {
				status.value = 'more';
			}
		})
	}

	onReachBottom(() => {
		if (status.value == 'more') {
			params.page++;
			getData()
		}
	})
</script>

<style lang="scss">
	.rotate_icon {
		transform: rotate(90deg);
	}


	.fold {
		&_item {
			margin: 20rpx;
			background: #fff;
			border-radius: 20rpx;

			&_main {
				padding: auto;


				&_item {
					padding: 35rpx 35rpx 35rpx 50rpx;
					border-top: 1rpx solid #f7f8f9;
					color: #666;

					&:active {
						background: #eee;
					}
				}
			}

			&_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;


				&:active {
					background: #eee;
				}

				&_left {
					display: flex;
					align-items: center;

					&_name {
						font-weight: bold;
						margin-left: 20rpx;
					}

					&_image {
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}
	}
</style>